<template>
	<div id="myAuction">
		<div id="header">
			<img src="../../static/img/return.png" @click="Return"/>
			<p>我的拍卖</p>
		</div>
		<ul class="activityType">
			<li @click="activityType = 1,Request(activityType)">
				<p :class="activityType == 1?'type_active':''">继续竞拍</p>
			</li>
			<span>|</span>
			<li @click="activityType = 2,Request(activityType)">
				<p :class="activityType == 2?'type_active':''">待开奖<span :style="nums.waitPrize==0?'display: none;':''">{{nums.waitPrize}}</span></p>
			</li>
			<span>|</span>
			<li @click="activityType = 3,Request(activityType)">
				<p :class="activityType == 3?'type_active':''">继续参拍<span>{{nums.continueApply}}</span></p>
			</li>
			<span>|</span>
			<li @click="activityType = 4,Request(activityType)">
				<p :class="activityType == 4?'type_active':''"><img src="../../static/img/myActivity-01.png"/>中奖了<span :style="nums.win==0?'display: none;':''">{{nums.win}}</span></p>
			</li>
			<span>|</span>
			<li @click="activityType = 5,Request(activityType)">
				<p :class="activityType == 5?'type_active':''">可恢复<span>{{nums.restart}}</span></p>
			</li>
			<span>|</span>
			<li @click="activityType = 6,Request(activityType)">
				<p :class="activityType == 6?'type_active':''">已返款<span :style="nums.finish==0?'display: none;':''">{{nums.finish}}</span></p>
			</li>
			<span>|</span>
			<li @click="activityType = 7,Request(activityType)">
				<p :class="activityType == 7?'type_active':''">已取消<span :style="nums.cancel==0?'display: none;':''">{{nums.cancel}}</span></p>
			</li>
		</ul>
		<div class="process">
			<p>①竞拍</p>
			<span>-</span>
			<p>②开奖</p>
			<span>-</span>
			<p>③中奖下单</p>
			<span>-</span>
			<p>④提交报告</p>
			<span>-</span>
			<p>⑤返款</p>
		</div>
		<!-------没有任务------->
		<div v-if="taskList.length == 0" class="notask">
			<img src="../../static/img/myActivity-03.png"/>
			<p>空空如也~您还没有相对应的试用活动啦！</p>
			<router-link to='/home/good'>马上去申请试用</router-link>
		</div>
		<!--------任务列表--------->
		<div v-else class="task_list">
			<div v-for="(item,key) in taskList" class="task_item">
				<div class="item_1">
					<div class="item_1_left">
						<img src="../../static/img/myActivity-02.png"/>
						<p v-if="activityType < 4">{{getDate(item.createtime)}}</p><!--申请时间-->
						<p v-if="activityType > 3 ">{{getDate(item.auditTime)}}</p><!--中奖时间-->
					</div>
					<p v-if="activityType == 1">继续参拍</p>
					<p v-else-if="activityType == 2">待开奖</p>
					<p v-else-if="activityType == 3">继续竞拍</p>
					<p v-else-if="activityType == 4 && item.operaStatus == 11" class="winning">中奖了</p>
					<p v-else-if="activityType == 4 && item.operaStatus <= 13">待下单</p>
					<p v-else-if="activityType == 4 && item.operaStatus <= 15">待提交报告</p>
					<p v-else-if="activityType == 4 && item.operaStatus < 18">待提交追评</p>
					<p v-else-if="activityType == 4 && item.operaStatus < 21">待返款</p>
					<p v-else-if="activityType == 5">可恢复</p>
					<p v-else-if="activityType == 6">已返款</p>
					<p v-else-if="activityType == 7">已取消</p>
				</div>
				<div class="item_2"	 @click="detail(item.taskId)">
					<img :src="item.task.goodsImage"/>
					<div class="task_text">
						<div class="task_title">
							<img v-if="item.task.paltform == 1" src="../../static/img/tb.png"/>
							<img v-else-if="item.task.paltform == 2" src="../../static/img/tm.png"/>
							<img v-else-if="item.task.paltform == 3" src="../../static/img/jd.png"/>
							<p>{{item.task.taskName}}</p>
						</div>
						<p class="task_price">价格：<span>{{returnFloat(item.task.price)}}</span></p>
						<p class="task_id">下单账号：{{item.accountName}}</p>
						<p class="task_specification">规格：{{item.task.goodsNotice}}</p>
					</div>
				</div>
				<div v-if="activityType != 1&&activityType != 7" class="price">
					<p>目前最高价：￥{{item.taskList.currMaxPrice}}</p>
					<p>我的拍卖价：<input @click="activityType == 2?payOpen(key):''" type="number" v-model="item.offerPrice" readonly="readonly" /></p>
				</div>
				<div class="item_3">
					<div class="item_3_left">
						<p v-if="activityType == 2 && item.task.type!=3 && item.task.type!=7" class="count_down"><span>{{getOpenTime(item.taskList.openingTime)}}开奖</span></p>
						<p v-if="activityType == 7" class="why"><img src="../../static/img/myActivity-04.png"/>原因：{{item.cancelReason}}</p>
						<p v-else-if="activityType == 4 && item.operaStatus < 14" class="count_down"><span>{{countDown(item.auditTime, 4)}}后</span>流拍</p>
						<p v-else-if="activityType == 4 && item.operaStatus == 15" class="count_down"><span>{{countDown(item.payTime, (7*24))}}后</span>流拍</p>
						<p v-else-if="activityType == 4 && item.operaStatus == 17" class="count_down"><span>{{countDown(item.reportTime, (item.hasDayseval * 24)+24)}}后</span>流拍</p>
						<p v-else-if="activityType == 4 && item.operaStatus == 14" class="count_down"><span>{{countDown(item.payTime, 48)}}后</span>可提交报告</p>
						<p v-else-if="activityType == 4 && item.operaStatus == 16" class="count_down"><span>{{countDown(item.reportTime, (item.hasDayseval * 24))}}</span>可提交追评</p>
						<p v-else-if="activityType == 4 && item.operaStatus == 20" class="count_down"><span>{{countDown(item.reportTime, 48)}}后</span>自动返款</p>
						<p v-if="activityType == 4 && item.operaStatus == 30" class="why"><img src="../../static/img/myActivity-04.png"/>{{item.cancelReason}}</p>
					</div>
					<div class="task_btns">
						<input @click="del(item.taskId)" v-if="activityType == 1 || activityType == 7" class="btn1" type="button" value="删除" />
						<!--<input v-if="activityType != 1" class="btn1" type="button" value="反馈问题" @click="payOpen(item.task.id)" />-->
						<input style="margin-right: 0.5rem;" v-if="activityType != 1 && activityType < 4" class="btn2" type="button" value="修改下单账号" @click="selectOpen(key)" />
						<input @click="goProcess(item.taskId)" v-if="activityType == 1" class="btn2" type="button" value="继续参拍" />
						<input @click="item.operaStatus==7?updateStatus(item.taskId):goProcess(item.taskId)" v-if="activityType == 3&&((item.task.type != 3&&item.task.type!=7)||((item.task.type == 3||item.task.type==7) && item.taskList!=null && item.taskList.surplusNum>0))" class="btn2" type="button" value="继续参拍" />
						<input @click="goProcess(item.taskId)" v-if="activityType == 4 && item.operaStatus < 14 " class="btn2" type="button" value="去下单" />
						<input @click="goProcess(item.taskId)" v-if="activityType == 4 && item.operaStatus == 30" class="btn2" type="button" value="修改订单" />
						<input @click="item.operaStatus == 14?'':goProcess(item.taskId)" v-if="activityType == 4 && item.operaStatus < 16 && item.operaStatus > 13" :class="item.operaStatus == 14?'btn1':'btn2'" type="button" value="提交报告"/>
						<input @click="item.operaStatus == 14?'':goProcess(item.taskId)" v-if="activityType == 4 && item.operaStatus == 35" :class="item.operaStatus == 14?'btn1':'btn2'" type="button" value="修改报告"/>
						<input @click="item.operaStatus == 16?'':goProcess(item.taskId)" v-if="activityType == 4 && item.operaStatus < 18 && item.operaStatus > 15" :class="item.operaStatus == 16?'btn1':'btn2'" type="button" value="提交追评" />
						<input @click="updateStatus(item.taskId)" v-if="activityType == 5" class="btn2" type="button" value="申请恢复" />
						<input v-if="activityType == 7" class="btn1" type="button" value="已取消" />
					</div>
				</div>
			</div>
		</div>
		<!-------修改拍卖价---------->
		<div id="pay_password" v-show="payPassword">
			<div class="pay_password">
				<div class="password_input">
					<p>拍卖价：</p>
					<input type="number" v-model="newPrice" placeholder="请输入新的拍卖价" />
				</div>
				<div class="pay_btns">
					<input @click="payClose" type="button" value="取消" />
					<input type="button" @click="modify" value="确定" />
				</div>
			</div>
		</div>
		<!-----------账号选择-------------->
		<div @click="selectClose" id="select" v-show="selectSwitch">
			<div class="select">
				<ul class="select_list">
					<li v-for="item,key in selectList" @click="selected(key)">
						{{item.account}}
					</li>
				</ul>
				<input @click="selectClose" class="select_cancel" type="button" value="取消" />
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'myAuction',
	data:function(){
		return{
			activityType: -1,//活动状态
			taskList: [],
			nums: {},	// 各状态数量
			feedback: '',//反馈内容
			payPassword: false,//反馈弹窗开关
			taskId: '', // 反馈的活动id
			newPrice: '',//修改的拍卖价
			index: '',
			selectIndex: '',
			selectSwitch: false,//选择菜单开关
			selectList:[//账号选择数组
			],
		}
	},
	methods:{
		//----------请求---------
		Request:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
	        	status: _this.activityType
	        });
			_this.$axios.post('/user/auctionSchedule/selectListByStatus',postData).then(function(res){
			    var data = res.data.result;
			    _this.taskList = data;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		//----------更新状态---------
		updateStatus: function(taskId){
			var _this = this;
			let postData = _this.$qs.stringify({
				taskId: taskId
			});
			_this.$axios.post('/user/auctionSchedule/updateStatus',postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					if(_this.activityType == 5){
						_this.$alert("恢复成功");
						_this.activityType = 4;
					}else{
						_this.activityType = 2;
					}
					_this.$router.replace({path: '/home/myAuction', query: {type: _this.activityType}});
					_this.selectNum();
					_this.Request();
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		//----------删除活动---------
		del: function(taskId){
			this.$confirm('确认删除?删除后该活动将从列表中消失');
			var _this = this;
			$('#determine').click(function(){
				let postData = _this.$qs.stringify({
					taskId: taskId
				});
				_this.$axios.post('/user/auctionSchedule/deleteContinueTask',postData).then(function(res){
					var data = res.data;
					if(data.message == "succ"){
						_this.Request();
					}else{
						_this.$alert(data.result);
					}
				}).catch(function (error) {
					console.log(error);
				});
			})
		},
		//----------跳转页面---------
		goProcess: function(taskId){
			var _this = this;
			this.$router.push({name: 'processAuction',params:{ taskId: taskId}});
		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		payOpen:function(key){//打开反馈弹窗
			this.payPassword = true;
			this.index = key;
		},
		payClose:function(){//关闭反馈弹窗
			this.payPassword = false;
		},
		//--------修改我的拍卖价------------
		modify:function(){
			this.payClose();
			if(this.newPrice < this.taskList[this.index].taskList.currMaxPrice){
				this.$alert('竞拍价不得低于目前最高价');
				return;
			}else if(this.newPrice > this.taskList[this.index].task.price*0.5){
				this.$alert('竞拍价不得高于封顶价');
				return;
			}
			let postData = this.$qs.stringify({
				scheduleId: this.taskList[this.index].id,
				offerPrice: this.newPrice
			});
			var _this = this;
			_this.$axios.post('/user/auctionSchedule/updateOfferPrice', postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.Request();
				}else{
					_this.$alert(data.result);
				}
			}).catch(function(err){
				console.log(err);
			});
		},
		//--------Select相关事件---------
	    selectClose: function(){//关闭选择菜单
	    	this.selectSwitch = false;
	    },
	    selected: function(key){
	    	this.selectSwitch = false;
	    	var _this = this;
	    	let postData = _this.$qs.stringify({
	    		scheduleId: _this.taskList[this.selectIndex].id,
	    		accountId: _this.selectList[key].id
	    	});
	    	_this.$axios.post('/user/auctionSchedule/updateAccount', postData).then(function(res){
	    		_this.$alert(res.data.result);
	    		if(res.data.message == "succ"){
	    			_this.taskList[_this.selectIndex].accountName = _this.selectList[key].account;
	    		}
	    	}).catch(function(err){
	    		console.log(err);
	    	});
	    },
	    selectOpen: function(key){//打开选择菜单
	    	var _this = this;
	    	_this.selectIndex = key;
	    	var type;
	    	if(_this.taskList[key].task.paltform == 1 || _this.taskList[key].task.paltform == 2){
	    		type = 1;
	    	}else{
	    		type = 2;
	    	}
			let postData = _this.$qs.stringify({
		    	type: 1
		    });
			_this.$axios.post('/user/bindAccount/getMyBindAccount',postData).then(function(res){
				var data = res.data;
			    if(data.message == "succ"){
			    	if(data.result.length > 1){
			    		_this.selectList = data.result;
			    		_this.selectSwitch = true;
			    	}else{
			    		if(_this.taskList[key].task.paltform == 3){
			    			// 跳转至绑定账号
				    		_this.$confirm("您只绑定了一个京东账号，是否前往增加？", function(){
				    			_this.$router.push('/user/accountJD');
				    		});
			    		}else{
			    			// 跳转至绑定账号
				    		_this.$confirm("您只绑定了一个淘宝账号，是否前往增加？", function(){
				    			_this.$router.push('/user/accountTB');
				    		});
			    		}
			    	}
			    }else{
			    	_this.$alert(data.result);
			    }
			}).catch(function (error) {
				console.log(error);
			});
	    },
		//--------获取指定日期加限定小时数 与当前时间的时间差-----------
		countDown: function(str, hours){ 
			if(str == ""||str ==null){
				return "";
			}
			var oTime = new Date(str + hours * 3600 * 1000);
//			oTime.setHours(oTime.getHours() + hours);
			var oDate = new Date();
			oTime = oTime - oDate;
			var day = parseInt(oTime / (1000*60*60*24));
			var hour = parseInt((oTime % (1000*60*60*24)) / (1000*60*60));
			var min = parseInt(((oTime % (1000*60*60*24)) % (1000*60*60)) / (1000*60));
			return day + "天" + hour + "时" + min + "分";
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
		//--------小数点后两位不够补零---------------
		returnFloat:function(value){
			var value=Math.round(parseFloat(value)*100)/100;
			var xsd=value.toString().split(".");
			if(xsd.length==1){
				value=value.toString()+".00";
				return value;
			}
			if(xsd.length>1){
				if(xsd[1].length<2){
					value=value.toString()+"0";
				}
				return value;
			}
		},
		//----------查看各状态活动数量---------
		selectNum: function(){
			var _this = this;
			_this.$axios.post('/user/auctionSchedule/getMyAuction').then(function(res){
			    var data = res.data.result;
			    _this.nums = data;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		//-------返回上一页-------
		Return: function(){
			this.$router.go(-1);
		},
		//-------查看详情-------
		detail: function(taskId){
			this.$router.push({path: '/user/taskDetail1', query: {taskId: taskId, type: 2}})
		},
		// -------控制滚动条-------
		scroll: function(flag){
			// 获取节点宽度
			var liWidth = document.getElementsByTagName("li")[0].offsetWidth;
			// 当前滚动条滚动距离
			var active = document.getElementsByClassName("activityType")[0].scrollLeft;
			// 将选中节点滚动到中间
			if(flag){
				if(this.activityType > 2){
					document.getElementsByClassName("activityType")[0].scrollTo(liWidth*(this.activityType-2),0);
				}
			}else{
				document.getElementsByClassName("activityType")[0].scrollTo(0,0);
				document.getElementsByClassName("activityType")[0].scrollTo(liWidth*(this.activityType-2),0);
			}
		},
		getOpenTime: function(time){
			var open = new Date(time);
			var now = new Date();
			if(open.getFullYear() == now.getFullYear() && open.getMonth() == now.getMonth()){
				if(open.getDate() == now.getDate()){
					return '今天 ' + this.getzf(open.getHours()) + ' : ' + this.getzf(open.getMinutes())+' ';
				}else{
					return '明天 ' + this.getzf(open.getHours()) + ' : ' + this.getzf(open.getMinutes())+' ';
				}
			}
		}
	},
	watch:{
		activityType(newval, old){
			if(newval > old){
				this.scroll(true);
			}else{
				this.scroll(false);
			}
			this.$router.replace({path: '/home/myAuction', query: {type: this.activityType}});
		}
	},
	created:function(){
		if(this.activityType == -1){
			if(this.$route.query.type){
				this.activityType = this.$route.query.type;
			}else{
				this.activityType = 3;
			}
		}
		this.selectNum();
		this.Request();
	},
	mounted: function(){
		this.scroll(true);
	}
}
</script>

<style scoped>
::-webkit-scrollbar {
    display: none;
}
#myAuction{
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	padding-top: 7.2rem;
	padding-bottom: 6rem;
	box-sizing: border-box;
}
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
/*---------任务状态筛选------------*/
.activityType{
	width: 100%;
	height: 3.2rem;
	background-color: #fff;
	position: fixed;
	top: 4rem;
	left: 0;
	display: -webkit-box;
	font-size: 1.2rem;
	overflow-x: auto;
	border-bottom: 1px solid #EEEEEE;
	box-sizing: border-box;
	align-items: center;
}
.activityType>span{
	color: #EEEEEE;
}
.activityType li{
	width: 8rem;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.activityType li:last-child{
	border-right: none;
}
.activityType li p{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.activityType li p.type_active{
	border-bottom: 2px solid #FF6565;
	color: #FF6565;
}
.activityType li img{
	height: 1.4rem;
	display: block;
	margin-right: 0.1rem;
}
.activityType li span{
	color: #FF6565;
}
/*---------流程提醒---------------*/
.process{
	display: flex;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	align-items: center;
	color: #FC9A1C;
	background-color: #FFFCEC;
	border-bottom: 1px solid #FAD484;
	border-top: 1px solid #FAD484;
	box-sizing: border-box;
}
.process span{
	margin: 0 0.4rem;
}
/*---------没有任务-----------*/
.notask{
	padding-top: 3rem;
	padding-bottom: 3rem;
	background-color: #fff;
	height: 100%;
	box-sizing: border-box;
}
.notask img{
	height: 8rem;
	display: block;
	margin: 0 auto;
}
.notask p{
	font-size: 1.2rem;
	color: #787878;
	text-align: center;
	margin-top: 1.5rem;
}
.notask a{
	width: 12rem;
	height: 3rem;
	border: 1px solid #FF6565;
	background-color: #fff;
	color: #FF6565;
	border-radius: 3px;
	display: block;
	margin: 0 auto;
	margin-top: 1.5rem;
	text-align: center;
	line-height: 3rem;
}
/*--------任务列表-----------*/
.task_item{
	background-color: #fff;	
	margin-bottom: 1rem;
}
.item_1{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	box-sizing: border-box;
}
.item_1 .item_1_left{
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	color: #787878;
}
.item_1 .item_1_left img{
	height: 1.2rem;
	display: block;
	margin-right: 0.2rem;
}
.item_1>p{
	color: #5A9FFF;
	font-size: 1.2rem;
}
.item_1>p.winning{
	color: #FC9A1C;
}
.item_2{
	background-color: #F5F5F5;
	padding: 1rem;
	box-sizing: border-box;
	display: flex;
}
.item_2>img{
	width: 8rem;
	height: 8rem;
	display: block;
	margin-right: 1rem;
}
.task_text{
	width: calc(100% - 9rem);
	height: 8rem;
	font-size: 1.2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.task_title img{
	height: 1.4rem;
	display: inline-block;
}
.task_title p{
	width: calc(100% - 2rem);
	display: inline-block;
	color: #4F4F4F;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.task_price{
	color: #4F4F4F;
}
.task_price span{
	color: #FF6565;
}
.task_id,.task_specification{
	color: #787878;
}
/*---------继续抽奖-----------*/
.continue{
	background-color: #fff;
	display: flex;
	justify-content: flex-end;
	padding: 0.8rem 1rem;
	border-bottom: 1px solid #EEEEEE;
	box-sizing: border-box;
	color: #4f4f4f;
	font-size: 1.2rem;
}
/*----------价格-----------*/
.price{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 3.6rem;
	padding: 0 1rem;
	box-sizing: border-box;
	border-bottom: 1px dashed #EEEEEE;
	color: #787878;
	font-size: 1.2rem;
}
.price input{
	width: 6rem;
	height: 2rem;
	border: 1px solid #EEEEEE;
	border-radius: 3px;
	padding-left: 0.5rem;
}
/*---------按钮------------*/
.item_3{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	box-sizing: border-box;
}
.item_3_left .count_down{
	font-size: 1rem;
	color: #4F4F4F;
}
.item_3_left .count_down span{
	color: #FF6565;
	margin-right: 0.8rem;
}
.item_3_left .why{
	display: flex;
	align-items: center;
	font-size: 1rem;
	color: #5A9FFF;
}
.item_3_left .why img{
	height: 1.2rem;
	display: block;
	margin-right: 0.2rem;
}
.task_btns{
	display: flex;
}
.task_btns input{
	padding: 0 0.5rem;
	border-radius: 3px;
	background-color: #fff;
}
.task_btns input.btn1{
	border: 1px solid #d2d2d2;
	color: #787878;
	margin-right: 0.5rem;
}
.task_btns input.btn2{
	border: 1px solid #FFA9B7;
	color: #FF6565;
}
.task_btns input.btn3{
	border: 1px solid #d2d2d2;
	background-color: #d2d2d2;
}
/*---------修改我的拍卖价弹窗----------*/
#pay_password{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 11;
}
.pay_password{
	width: 90%;
	background-color: #fff;
	border-radius: 3px;
	margin-top: -10%;
	overflow: hidden;
}
.password_input{
	background-color: #F6F6F6;
	color: #4f4f4f;
	display: flex;
	align-items: center;
	height: 6rem;
	justify-content: center;
	font-size: 1.2rem;
}
.password_input input{
	width: 50%;
	height: 3rem;
	border: 1px solid #EEEEEE;
	padding-left: 1rem;
	box-sizing: border-box;
	font-size: 1.2rem;
}
.pay_btns{
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pay_btns input{
	width: 10rem;
	height: 3rem;
	border-radius: 50px;
	color: #FFFFFF;
	border: none;
}
.pay_btns input:first-child{
	background-color: #CBCBCB;
	margin-right: 5%;
}
.pay_btns input:last-child{
	background-color: #FEAA21;
}
/*--------账号选择-----------*/
#select{
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 11;
}
#select .select{
	width: 100%;
	max-height: 16rem;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
}
#select .select .select_list{
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	max-height: 12rem;
}
#select .select .select_list li{
	width: 100%;
	height: 4rem;
	font-size: 1.2rem;
	color: #787878;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid #EEEEEE;
	box-sizing: border-box;
}
#select .select .select_list li.select_active{
	color: #FF6565;
}
#select .select .select_cancel{
	width: 100%;
	height: 4rem;
	border: none;
	border-top: 1px solid #EEEEEE;
	background-color: #fff;
	color: #787878;
	font-size: 1.2rem;
}
</style>
